<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"
      type="application/javascript"
    ></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Mock.js/1.0.1-beta1/mock-min.js"></script>
  </head>
  <body>
    <div id="app">
      <div class="big">
        <!-- <div class="box gray" style="left: 390px; top: 366px; z-index: 3">
          <img src="./img/3.png" style="object-fit: contain; width: 80%; height: 80%" />
        </div>
        <div class="box gray" style="left: 390px; top: 426px; z-index: 3">
          <img src="./img/3.png" style="object-fit: contain; width: 80%; height: 80%" />
        </div> -->

        <div
          class="box gray"
          ref="box"
          @click="boxClick(idx,item.type)"
          v-for="(item,idx) of founds"
          :style="{
            ...item.pos,
            zIndex: item.zindex,
        } "
        >
          <img
            :src="`./img/${item.type}.png`"
            style="object-fit: contain; width: 80%; height: 80%"
          />
        </div>
      </div>

      <button @click="genPostiion">测试生成随机坐标</button>
      <div class="slots" ref="slots">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <script>
      const colors = Mock.mock({
        'data|15': ['@color'],
      });
      let app = new Vue({
        data() {
          return {
            slotsX: [],
            slotsY: 0,
            selected: [],
            founds: [],
            minX: 0,
            maxX: 0,
            minY: 100,
            maxY: 550,
          };
        },
        mounted() {
          console.log(window);
          console.dir(document.querySelectorAll('.slots > div')[0]);
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const slotsWidth = 482;
          this.minX = windowWidth / 2 - 200;
          this.maxX = windowWidth / 2 + 200;

          for (let i = 0; i < 7; i++) {
            this.slotsX.push(windowWidth / 2 - slotsWidth / 2 - 1 + i * 70 + 2 * i);
          }
          console.log('slotsX', this.slotsX);
          this.slotsY = windowHeight - 30 - 51;

          console.log(this.$refs.box);

          let _founds = [];
          let originIdex = 1; //  第一层20  第二层30  第三次35   第四层 15
          for (let i = 0; i < 100; i++) {
            const _pos = this.genPostiion();
            const rnd = this.genType();
            if (i == 20) originIdex = 2;
            if (i == 50) originIdex = 3;
            if (i === 85) originIdex = 4;
            _founds.push({
              pos: _pos, // { left:xxxpx,top: xxxpx }
              type: rnd.type,
              background: rnd.color,
              zindex: originIdex,
            });
          }
          console.log('_founds', _founds);
          this.founds = _founds;
          this.$nextTick(() => {
            this.whoCanClick(); // todo
          });
        },
        methods: {
          boxClick(idx, type) {
            // 把点击中的方块的 当中索引值记录  还有它的类型
            this.selected.push({
              idx: idx,
              type: type,
            });
            console.log('this.selected', this.selected);
            this.$refs.box[idx].style.top = this.slotsY + 'px'; // 移动之后的y轴位置
            this.$refs.box[idx].style.left = this.slotsX[this.selected.length - 1] + 'px';
            setTimeout(() => {
              this.countYang(); // 开始统计是否有满足消除条件的
            }, 200);
          },
          countYang() {
            // 获取全部已经选中成内容的类型
            const _type = this.selected.map((item) => item.type);
            // 去重
            const types = [...new Set(_type)];
            // 开始进行统计
            for (const type of types) {
              // 过滤出所有当前类型的选中的成员
              const arr = this.selected.filter((item) => item.type === type);
              if (arr.length >= 3) {
                for (const _it of arr) {
                  this.$refs.box[_it.idx].remove(); // 根据它的索引值来移除自身
                  // 别忘记还有处理已选中的数组
                }
                this.selected = this.selected.filter((item) => item.type !== type);
                this.reorder(); // 重新排序
              }
            }
            this.whoCanClick();
          },
          reorder() {
            this.selected.forEach((item, index) => {
              this.$refs.box[item.idx].style.left = this.slotsX[index] + 'px';
            });
          },
          genPostiion() {
            // 根据  minX maxX minY maxY 生成一个区间的x 和y的坐标
            // todo 可以优化一下 x和y的生成
            const x = this.minX + Math.random() * 400;
            const y = this.minY + Math.random() * 450;
            console.log('结果', { left: parseInt(x) + 'px', top: parseInt(y) + 'px' });
            return { left: parseInt(x) + 'px', top: parseInt(y) + 'px' };
          },
          genType() {
            const types = [3, 4, 17];

            const len = types.length;
            const idx = Math.floor(Math.random() * len);
            return { type: types[idx] };
          },
          whoCanClick() {
            const dom = document.querySelectorAll('.box');
            const domarr = Array.from(dom);
            domarr.forEach((item, idx) => {
              const selfx = parseFloat(item.style.left);
              const selfy = parseFloat(item.style.top);
              const selfindex = parseInt(item.style.zIndex);
              const endx = selfx + 59;
              const endy = selfy + 66;
              console.log('当前的坐标范围', selfx, selfy, 'x', endx, endy, 'idnex', selfindex);

              const exits = domarr
                .filter((it, index) => index !== idx) // 从不包括自己的整个数组当中寻找
                .find((d, index) => {
                  // 在我的范围以内且 zindex比我大的
                  const dx = parseFloat(d.style.left);
                  const dy = parseFloat(d.style.top);
                  const zindex = parseInt(d.style.zIndex);
                  console.log('遍历的节点的坐标范围', dx, dy, 'index,', zindex);
                  const kuan = Math.abs(dx - selfx);
                  const gao = Math.abs(dy - selfy);
                  const hasone =
                    (kuan < 59 && gao < 66 && zindex > selfindex) ||
                    (kuan < 59 && gao < 66 && zindex == selfindex && index >= idx);
                  return hasone;
                });
              console.log('是否有覆盖在我上面的', exits);

              if (!exits) {
                item.classList.remove('gray'); // 如果没有人覆盖在我上面 那么我就去除我的 gray样式
              }
            });
          },
        },
      });

      app.$mount('#app');
    </script>
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
      }
      body {
        background: url('./cd.jpeg') no-repeat;
        background-size: cover;
      }
      .box {
        width: 59px;
        height: 66px;
        background: url(./img/1.png) no-repeat;
        background-size: cover;
        box-sizing: border-box;
        position: fixed;
        left: 10px;
        top: 10px;
        transition: all 200ms;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .gray {
        -webkit-filter: grayscale(0.9);
      }
      .slots {
        display: flex;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
      }
      .slots > div {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        margin-left: 20px;
      }
      .slots > div:first-child {
        margin-left: 0;
      }
      .big {
        width: 400px;
        height: 450px;
        position: fixed;
        left: 50%;
        margin-left: -200px;
        top: 100px;
      }
    </style>
  </body>
</html>
